import React, { Component } from 'react'
import FilterFooter from '../../../../components/FilterFooter'
import './index.sass'
export default class FilterMore extends Component {
  state = {
    selectedValues: this.props.defaultValues
  }
  // 标签点击事件
  onTagClick(value) {
    const { selectedValues } = this.state
    // 创建新数组
    const newSelectedValues = [...selectedValues]

    if (!newSelectedValues.includes(value)) {
      // 没有当前项的值
      newSelectedValues.push(value)
    } else {
      // 有
      const index = newSelectedValues.findIndex(item => item === value)
      newSelectedValues.splice(index, 1)
    }

    this.setState({
      selectedValues: newSelectedValues
    })
  }
  onCancel = () => {
    this.setState({
      selectedValues: []
    })
  }
  // 确定按钮的事件处理程序
  onOk = () => {
    const { type, onSave } = this.props
    // onSave 是父组件中的方法
    onSave(type, this.state.selectedValues)
  }
  renderFilters(data) {
    const { selectedValues } = this.state
    // 高亮类名： styles.tagActive
    return data.map(item => {
      const isSelected = selectedValues.includes(item.value)

      return (
        <dd
          key={item.value}
          className={isSelected ? 'tagActive' : ''}
          onClick={() => this.onTagClick(item.value)}
        >
          {item.label}
        </dd>
      )
    })
  }
  render() {
    const {
      data: { roomType, oriented, floor, characteristic },
      onCancel,
      type
    } = this.props
    return (
      <div className="filter-more">
        <div
          className="mask"
          onClick={() => onCancel(type)}
        />
        <div className="tags-box">
          <dl>
            <dt>户型</dt>
            <div className="tag-box">
              {this.renderFilters(roomType)}
            </div>
          </dl>
          <dl>
            <dt>朝向</dt>
            <div className="tag-box">
              {this.renderFilters(oriented)}
            </div>
          </dl>
          <dl>
            <dt>楼层</dt>
            <div className="tag-box">
              {this.renderFilters(floor)}
            </div>
          </dl>
          <dl>
            <dt>房屋亮点</dt>
            <div className="tag-box">
              {this.renderFilters(characteristic)}
            </div>
          </dl>
        </div>
        <FilterFooter
          className="footer"
          cancelText="清除"
          onCancel={this.onCancel}
          onOk={this.onOk}
        />
      </div>
    )
  }
}
